﻿<template>
    <div class="page template-page">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner navbar-inner-centered-title">
                <div class="title text-color-primary">诊断模板</div>
                <div class="right">
                    <!-- 关闭弹窗 -->
                    <a class="link popup-close color-primary" data-popup=".template-popup">
                        <i class="icon f7-icons if-not-md">xmark_circle</i>
                        <i class="icon material-icons md-only ">xmark_circle</i>
                    </a>
                </div>
            </div>
        </div>
        <!--<div class="fab fab-right-center color-primary">
            <a href="#">
                <i class="icon f7-icons color-white">plus</i>
                <i class="icon f7-icons color-white">xmark</i>
            </a>
            <div class="fab-buttons fab-buttons-bottom">
                <a href="" class="fab-label-button" id="replace-btn">
                    <i class="icon f7-icons color-white">chevron_left</i>
                    <span class="fab-label">替换</span>
                </a>
                <a href="" class="fab-label-button" >
                    <i class="icon f7-icons color-white">chevron_left_2</i>
                    <span class="fab-label">追加</span>
                </a>
            </div>
        </div>-->
        <div class="page-content">
            <div class="tree-container">
                <div class="container-inner">
                    <div class="treeview common-tree-container">
                    </div>
                    <div class="treeview user-tree-container">
                    </div>
                    <div class="treeview department-tree-container">
                    </div>
                    <div class="treeview public-tree-container">
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 grid-gap">
                <button class="button  button-raised" id="replace-btn">替换</button>
                <button class="button  button-raised " id="append-btn">追加</button>
            </div>
            <div class="template-content">
                <div class="actual-content">
                    <div class="iamge-seeing-title title">影像所见</div>
                    <div class="image-seeing-content content">无</div>
                    <div class="image-diagnosis-title title">影像诊断</div>
                    <div class="image-diagnosis-content content">无</div>
                    <div class="image-opinion-title title">影像建议</div>
                    <div class="image-opinion-content content">无</div>
                </div>
            </div>
            <div class="segmented segmented-strong" style="width:100%;">
                <button class="button" template-type="common">
                    常用
                </button>
                <button class="button" template-type="user">
                    个人
                </button>
                <button class="button" template-type="department">
                    科室
                </button>
                <button class="button" template-type="public">
                    公共
                </button>
                <span class="segmented-highlight"></span>
            </div>
        </div>
    </div>
</template>
<script>
    export default (props, { $, $on, $f7, $h, $f7router, $f7route, $theme, $update, $store }) => {
        /*
            $   Dom7 标准库
            $on 页面事件处理器绑定
            $f7 app实例对象
            $h  html模板字面量
        */
        let common, user, department, public, templateType,selectedTemplateId,template;
        $on('pageInit', (e, page) => {
            let $buttons = $(" .template-page .page-content .segmented .button");
            clickSegmented('common');// 默认加载公共模板
            $buttons.on('click', (e) => {
                let target = $(e.currentTarget);
                if (!target.hasClass('button-active')) {
                    target.addClass('button-active');
                    $(target.siblings()).removeClass('button-active');
                }
                templateType = target.attr('template-type');
                clickSegmented(templateType);
            })
            $("#replace-btn").on('click', () => {
                applyTemplate('replace');
            })
            $("#append-btn").on('click', () => {
                applyTemplate('append');
            })
        });

        // 选择模板类型
        const clickSegmented = (templateType) => {
            let $container = $(`.template-page .tree-container .container-inner .${templateType}-tree-container`);
            switch (templateType) {
                case 'common':
                    if (!common) {
                        getTreeView(templateType)
                            .then((result) => {
                                switchTree($container);
                                common = result;
                            })
                    }
                    else {
                        switchTree($container);
                    }
                    break;
                case 'user':
                    if (!user) {
                        getTreeView(templateType)
                            .then((result) => {
                                switchTree($container);
                                user = result;
                            })
                    }
                    else {
                        switchTree($container)
                    }
                    break;
                case 'department':
                    if (!department) {
                        getTreeView(templateType)
                            .then((result) => {
                                switchTree($container);
                                department = result;
                            })
                    }
                    else {
                        switchTree($container)
                    }
                    break;
                case 'public':
                    if (!public) {
                        getTreeView(templateType)
                            .then((result) => {
                                switchTree($container);
                                public = result;
                            })
                    }
                    else {
                        switchTree($container);
                    }
                default:
                    break;
            }

        }
        // 添加事件监听
        const addTemplateClickLinstener = (templateType) => {
            let $tempaltes = $(`.template-page .${templateType}-tree-container .treeview-item[templateId]`);
            $tempaltes.on('click', (e) => {
                let $target = $(e.currentTarget);
                let tempalteId = $target.attr('templateId');
                $(".template-page .treeview-item").removeClass("selected-tempalte");
                $target.addClass("selected-tempalte");
                selectedTemplateId = tempalteId.slice(3, tempalteId.length);
                showTmeplate(selectedTemplateId);
            })
        }
        // 视图切换
        const switchTree = ($container) => {
            $container.show();
            $($container.siblings()).hide();
        }
        // 获取模板树
        const getTreeView = (templateType) => {
            department;
            $f7.preloader.show();
            return new Promise((resolve) => {
                $f7.preloader.show();
                fetch(`/api/diagnosis-template/get-templates?templateType=${templateType}&reportId=${$store.getters.reportId.value}&enableFilter=${undefined}`,
                    {
                        method: 'GET',
                        headers: { 'Content-Type': 'application/json' }
                    }).then((res) => {
                        res.json().then((result) => {
                            if (result.success) {
                                loadTreeFirstLevel(result.data, templateType);
                                addTemplateClickLinstener(templateType);
                                resolve(result.data);
                            }
                            else {
                                $f7.preloader.hide();
                                $f7.dialog.alert(`<span class="text-color-red"><b>${result.error}</b></span>`, '错误');
                            }
                        });
                    })
            })
        }
        //  加载treeView第一层
        const loadTreeFirstLevel = (items, templateType) => {
            // 添加顶层
            let $treeView = $(`.template-page .page-content .container-inner .${templateType}-tree-container`);
            let el = "";
            let openedClassName = 'treeview-item-opened';
            if (['department', 'public'].indexOf(templateType) !== -1) {
                openedClassName = '';
            }
            items.map((rootItem) => {
                if (rootItem.isDirectory && !rootItem.parentId) {
                    el += `<div class="treeview-item ${openedClassName}" directoyId="${rootItem.name}" >
                        <div class="treeview-item-root">
                                    <div class="treeview-toggle"></div>
                                    <div class="treeview-item-content">
                                    <i class="icon f7-icons">folder</i>
                                    <div class="treeview-item-label left-panel-item">${rootItem.name}</div>
                                    </div>
                        </div>
                        <div class="treeview-item-children" directoyId="id_${rootItem.id}">

                        </div>
                   </div>`
                }
                else if (!rootItem.isDirectory && !rootItem.parentId) {
                    el += `<div class="treeview-item" templateId="id_${rootItem.templateId}">
                                <div class="treeview-item-root">
                                     <div class="treeview-item-content" >
                                         <i class="icon f7-icons">doc</i>
                                         <div class="treeview-item-label left-panel-item">${rootItem.name}</div>
                                     </div>
                                </div>
                   </div>`;
                }
            });
            $treeView.append(el);
            let roots = items.filter((item) => item.isDirectory && !item.parentId);
            recursionAdd(roots, items, $treeView);
            $f7.preloader.hide();
        }
        // 递归加载子
        const recursionAdd = (roots, items, $treeView) => {
            for (let i = 0; i < roots.length; i++) {
                children = items.filter((item) => item.parentId && item.parentId === roots[i].id);
                if (children && children.length > 0) { // 为子
                    children.map((child) => {
                        let html = "";
                        grandChildren = items.filter((item) => item.parentId === child.id);
                        if (grandChildren && grandChildren.length > 0) {// 目录
                            html += `<div class="treeview-item" directoyId="${child.id}">
                                            <div class="treeview-item-root"  id="${child.id}">
                                                        <div class="treeview-toggle"></div>
                                                        <div class="treeview-item-content">
                                                            <i class="icon f7-icons">folder</i>
                                                            <div class="treeview-item-label left-panel-item ">${child.name}</div>
                                                        </div>
                                            </div>
                                            <div class="treeview-item-children" directoyId="id_${child.id}">
                                            </div>
                                    </div>`;
                        }
                        else { // 具体项
                            html += `<div class="treeview-item" templateId="id_${child.templateId}">
                                            <div class="treeview-item-root ">
                                                     <div class="treeview-item-content">
                                                         <i class="icon f7-icons">doc</i>
                                                         <div class="treeview-item-label left-panel-item">${child.name}</div>
                                                     </div>
                                            </div>
                                    </div>`;
                        }
                        $treeView.find(`.treeview-item-children[directoyId='id_${roots[i].id}']`).append(html);
                        if (grandChildren && grandChildren.length > 0) {
                            recursionAdd([child], items, $treeView);
                        }
                    })
                }
            }
        }
        // 展示模板内容
        const showTmeplate = (templateId) => {
            fetch(`/api/diagnosis-template/get-full-template?id=${templateId}`,
                {
                    method: 'GET',
                    headers: { 'Content-Type': 'application/json' }
                }).then((res) => {
                    res.json().then((result) => {
                        if (result.success) {
                            template = result.data;
                            $(".template-content .image-seeing-content").html(template.imageSeeing ? template.imageSeeing : '无');
                            $(".template-content .image-diagnosis-content").html(template.imageDiagnosis ? template.imageDiagnosis : '无');
                            $(".template-content .image-opinion-content").html(template.imageOpinion ? template.imageOpinion : '无');
                        }
                        else {
                            template = null;
                            $(".template-content .image-seeing-content").html('无');
                            $(".template-content .image-diagnosis-content").html('无');
                            $(".template-content .image-opinion-content").html('无');
                        }
                    });
                })
        }
        // 触发页面事件
        const applyTemplate = (actionType) => {
            if (template && (template.imageSeeing || template.imageDiagnosis)) {
                $f7.emit('templateApply', actionType, template);
                $f7.popup.close('.template-popup');
            }
            else {
                $f7.dialog.alert(`<span class="text-color-primary"><b>请选择有效模板！</b></span>`,'提示');
                return;
            }
         }

        return $render;
    }
</script>
